<template>
  <div class="app-container" v-loading="loading">
    <div class="app-info-container">
      <div class="app-info">
        <div class="app-icon" :style="$menuUtils.getIconStyle(app)">
          <img
            v-if="$menuUtils.getIconImg(app)"
            :src="$menuUtils.getIconImg(app)" />
          <template v-else-if="$menuUtils.getIconFont(app)">
            <JIcon
              class="app-icon-white"
              :icon="$menuUtils.getIconFont(app)" />
            <JIcon
              class="app-icon-color"
              :icon="$menuUtils.getIconFont(app)"></JIcon>
          </template>
        </div>
        <div class="app-text">
          <div class="app-name" v-text="app.group_name"></div>
          <div class="app-mark" v-if="app.group_desc" v-text="app.group_desc"></div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-refresh" @click="handleAppSync">同步应用到终端系统</el-button>
    </div>

    <div class="app-container-title">
      <span>同步历史</span>
      <el-button type="text" icon="el-icon-refresh" size="mini" @click="refresh">刷新历史</el-button>
    </div>
    <el-table :data="records" border size="small" class="m-table pm-table" style="width: 100%;">
      <el-table-column prop="sync_status" label="同步状态" width="160" align="center">
        <template #default="scope">
          {{ getStateLabel(scope.row.sync_status) }}
        </template>
      </el-table-column>
      <el-table-column prop="sync_msg" label="备注" align="center"></el-table-column>
      <el-table-column prop="create_time" label="同步时间" width="160" align="center" class-name="app-cell"></el-table-column>
      <template #empty>
        <div>{{ !loading ? '暂无数据' : '' }}</div>
      </template>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.current"
      :page-sizes="[10, 20, 50, 100, 200, 300, 400]"
      :page-size.sync="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import _ from 'lodash';
import { ElMessage } from 'element-plus';
import {$menuUtils} from "@jzl/utils";

const props = defineProps({
  app: {
    type: Object,
    default: null
  }
});

const records = ref([]);
const page = ref({
  pageSize: 10,
  current: 1,
  total: 0
});
const loading = ref(false);

const init = async () => {
  refresh();
};

const refresh = async () => {
  loading.value = true;

  let appId = _.get(props.app, "group_id");
  let data = await api.group.syncAppRecords(appId, {
    page: page.value.current,
    pageSize: page.value.pageSize
  });

  records.value = _.get(data, 'rows');
  page.value.total = _.get(data, 'count');
  loading.value = false;
};

const handleSizeChange = (val) => {
  page.value.pageSize = val;
};

const handleCurrentChange = (val) => {
  page.value.current = val;
};

const handleAppSync = async () => {
  let appId = _.get(props.app, "group_id");
  let ret = await api.group.syncAppTask(appId);

  if (ret) {
    ElMessage.success("提交成功！");
  }
};

const getStateLabel = (state) => {
  let label = "";

  if (state == 1) {
    label = '同步中';
  } else if (state == 2) {
    label = '同步成功';
  } else if (state == 3) {
    label = '打包失败';
  } else if (state == 4) {
    label = '传输失败';
  } else if (state == 5) {
    label = '导入失败';
  }

  return label;
};

onMounted(() => {
  init();
});

watch(() => page.value.pageSize, () => {
  refresh();
});

watch(() => page.value.current, () => {
  refresh();
});
</script>

<style lang="scss" scoped>
.app-container-title {
  font-size: 14px;
  font-weight: bold;
  color: #444;
  margin-bottom: 5px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-info-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F5F9F9;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.app-info {
  width: 210px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: all .3s;
  margin-bottom: 10px;

  .app-icon {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    margin-right: 10px;
    background: #F1F1F1;
    font-size: 24px;
    transition: all .3s;

    i {
      font-size: 24px;

      &.app-icon-white {
        color: #FFF;
      }
      &.app-icon-color {
        display: none;
      }
    }
  }
  .app-name {
    font-size: 15px;
    color: #222;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .app-mark {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
